<template>
	<view class="nav-bar" :style="{height: statusBarHeight + 'px', background: bg}"></view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
	name: 'NavBar',
	props: {
		bg: {
			type: String,
			default: ''
		}
	},
	setup(props) {
		const statusBarHeight = ref(0)
		const windowWidth = ref(0)
		const navbarHeight = ref(0)
		
		onMounted(() => {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			statusBarHeight.value = info.statusBarHeight;
			windowWidth.value = info.windowWidth

			/* h5 app mp-ali都是不支持getMenuButtonBoundingClientRect这个api的 */
			/* 微信、百度、QQ都是支持getMenuButtonBoundingClientRect这个api的 */
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取微信小程序胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏高度) = 导航栏高度
			navbarHeight.value = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight);
			console.log(navbarHeight.value);
			// 动态计算导航栏宽度
			windowWidth.value = menuButtonInfo.left
			// #endif
		})
		
		return {
			statusBarHeight,
			windowWidth,
			navbarHeight
		}
	}
}
</script>

<style lang="scss" scoped>
	.nav-bar{
		background: transparent;
	}
</style>